<template>
  <a-select
    :value="currentValue"
    @search="inputSearch"
    @change="clearChange"
    :dropdownMatchSelectWidth="false"
    showSearch
    :allowClear="allowClear"
    style="width:100%">
    <div slot="dropdownRender">
      <!--      这里有两种选中的方法-->
      <!--      第一种，表格的选中当前rowselection的选择框，点其他位置无法选中数据，
                 而且这种选择方法，会保留selectRowKeys，同样的条目，再次点击下拉框就无法选中了，
                 但是也有解决方法，就是在选择完成之后，再清除选中的selectedRowKeys数组-->
      <!--      <a-table-->
      <!--        :row-selection="{-->
      <!--          selectedRowKeys: selectedRowKeys,-->
      <!--          type:'radio',-->
      <!--          onChange: onSelectChange-->
      <!--        }"-->
      <!--        :data-source="dataSource"-->
      <!--        :columns="columns"-->
      <!--        size="small"-->
      <!--        :pagination="false"-->
      <!--        :scroll="{x:400,y:200}">-->
      <!--      </a-table>-->

      <!--      第二种，选中当前行，使用tabel的customRow属性，点击行就可以选中当前行的数据，让后自行-->
      <a-table
        :data-source="dataSource"
        :columns="columns"
        :customRow="customRow"
        size="small"
        :pagination="false"
        :scroll="{x:400,y:200}">
      </a-table>
    </div>
  </a-select>
</template>

<script>
export default {
  name: 'mulSelectSearch',
  props: {
    value: {
      default: ''
    },
    option: {
      type: Object,
      default: () => {
      }
    },
    allowClear: {
      type: Boolean,
      default: true
    },
    triggerChange: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      selectedRowKeys: [],
      dataSource: [
        {
          key: '0',
          name: 'Edward King 0',
          money: 1.02,
          birthday: '2016-06-18'
        },
        {
          key: '1',
          name: 'Edward King 1',
          money: 23.00,
          birthday: '2008-12-05'
        },
        {
          key: '2',
          name: 'Edward King 2',
          money: 16.02,
          birthday: '2016-06-18'
        },
        {
          key: '3',
          name: 'Edward King 3',
          money: 3.00,
          birthday: '2008-12-05'
        },
        {
          key: '4',
          name: 'Edward King 4',
          money: 6.02,
          birthday: '2016-06-18'
        },
        {
          key: '5',
          name: 'Edward King 5',
          money: 313.00,
          birthday: '2008-12-05'
        },
        {
          key: '6',
          name: 'Edward King 6',
          money: 116.02,
          birthday: '2016-06-18'
        }
      ],
      columns: [],
      currentValue: ''
    }
  },
  methods: {
    // 清空选中表单
    clearChange () {
      this.currentValue = null
    },
    // 使用第一种方法选中条目
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.currentValue = selectedRows[0][this.option.key]
    },

    // 使用第二种方法选中条目
    customRow (record, index) {
      return {
        on: {
          click: event => {
            // 当前行数据对象，
            // {__ob__: Observer}
            // birthday: "2016-06-18"
            // key: "0"
            // money: 1.02
            // name: "Edward King 0"
            console.log(record)
            this.currentValue = record.name
          }
        }
      }
    },

    // 远程查询，监听输入框，输入框变化就会调用此方法
    inputSearch (key) {
    // 输入的文本是key
      console.log(key)
    //  这里可以写查询数据的请求
    }

  // 这个是查询到所有数据之后，输入文本与已经查到的数据本地比对，其实就是filter过滤
  // inputSearch (value) {
  //   this.dataSource = this.allData.filter(item => {
  //     return Object.values(item).find(n => {
  //       return n.toString().includes(value)
  //     }) !== undefined
  //   })
  // }
  },
  watch: {
    currentValue (val) {
      console.log(`${val}  '监听'`)
      if (this.triggerChange) {
        this.$emit('change', val)
      } else {
        this.$emit('input', val)
      }
    }
  },
  mounted () {
    this.currentValue = this.value
    this.columns = this.option.columns
  }
}
</script>

<style scoped>

</style>
